<template>
     <!-- 列表区域 -->
     <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in listData" :key="index">
          <div class="view">
            <span class="index">{{index+1}}</span> <label>{{item.title}}</label>
            <button class="destroy" @click="handleDelete(index)"></button>
          </div>
        </li>
      </ul>
    </section>
</template>

<script>
export default {
    props: {
        // 接收父组件传过来的数据
        listData: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        // 处理删除事件
        handleDelete(index) {
            this.$emit('deleteItem', index)
            console.log('删除第' + (index + 1) + '项')
        }

},
}
</script>

<style>

</style>